<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>10.21作业</title>
		<style type="text/css">
			#div1 {
				width: 300px;
				height: 300px;
				background: #FF0000;
			}
			#div2 {
				width: 300px;
				height: 300px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<!-- 1.按钮和DIV的单击事件（三种绑定方式） -->
		<button type="button" onclick="b1()" ondblclick="b2()">按钮1</button>
		<button type="button" id="but2">按钮2</button>
		<button type="button" id="but3">按钮3</button>
		<!-- 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式） -->
		<!-- 	onmouseenter	进入元素
		onmouseleave	离开元素
		onmousemove	在元素上面移动 -->
		<div id="div1" onmouseenter="d1()"></div>
		<!-- 3.登入页面
		用户名输入框，
		密码输入框，
		提交按钮-->
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label>用户名：</label>
				<input id="i1" type="text" class="mui-input-clear" placeholder="请输入" onblur="f2()" onfocus="f1()">
				<br>
				<label>密码：</label>
				<input id="i2" type="password" class="mui-input-clear" placeholder="请输入" onblur="f4()" onfocus="f3()">
				<br>
				<button type="button" id="ti1" onclick="t1()">提交</button>
			</div>
		</form>
		<!-- 4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
		<div id="div2" ></div>
		<button type="button" onclick="addListener();">添加监听器</button>
		<button type="button" onclick="removeListener();">移除监听器</button>
	</body>
	<script type="text/javascript">
		function b1() {
			console.log('单击了按钮');
		}

		function b2() {
			console.log('双击了按钮');
		}
		// 第二种绑定方式
		document.getElementById('but2').onclick = function() {
			console.log('按钮2被点击');
		}
		// 第三种绑定方式
		function b3() {
			console.log('单击了按钮3');
		}
		document.getElementById('but3').addEventListener('dblclick', b3);

		function d1() {
			console.log('进入DIV');
		}
		document.getElementById('div1').onmouseleave = function() {
			console.log('离开DIV');
		}

		function d3() {
			console.log('鼠标在DIV里移动')
		}
		document.getElementById('div1').onmousemove = d3;

		function d4() {
			console.log('单击了DIV');
		}
		document.getElementById('div1').addEventListener('click', d4)


		// 3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		function f1() {
			console.log('用户在输入名称！');
		}
		// 3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		function f2() {
			var i1 = document.getElementById('i1');
			if (i1.value == '') {
				alert('没有输入用户名')
			}
		}
		// 3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		function f3() {
			console.log('用户在输入密码！');
		}
		// 3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		function f4() {
			var i2 = document.getElementById('i2');
			if (i2.value == '') {
				alert('没有输入密码')
			}
		}
		// 3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		//      密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		function t1() {
			var zhaohao = document.getElementById('i1');
			var mm = document.getElementById('i2');
			if (zhaohao.value == '' && mm.value == '') {
				alert('用户名和密码为空');
			} else if (zhaohao.value == '') {
				alert('用户名为空');
			} else if (mm.value == '') {
				alert('密码为空');
			}
		}
		
		 // 4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
		 function add(){
			 console.log('鼠标在DIV里移动');
			 
		 }
		function addListener(){
			//添加监听器
			document.getElementById('div2').addEventListener('click',add)
		}
		function removeListener(){
			//移除监听器
			document.getElementById('div2').removeEventListener('click',add)
		}
	</script>
</html>
